<template>
    <div class="e-table">
        <div class="top">
            <div class="left">
                <div class="listTop">
                    <el-button
                        size="small"
                        class="btn-greenYellow"
                        @click="openAddDialog"
                    >
                        新增</el-button
                    >
                </div>
            </div>
            <div class="right">
                <div>
                    <el-input
                        placeholder="输入项目编号"
                        size="small"
                        v-model="pagination.query"
                        @blur="search"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="dialogVisibleSearch = true"
                        >高级搜索
                    </el-button>
                </div>
            </div>
        </div>
        <!--@cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave" -->
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            :cell-class-name="cellClsNm"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            @cell-dblclick="tableDbShow"
            v-loading="loading"
            highlight-current-row
        >
            <el-table-column show-overflow-tooltip label="操作" width="200">
                    <template slot-scope="{ row }">
                        <div>
                            <i
                                class="el-icon-edit"
                                style="cursor: pointer; font-size: 20px"
                                :class="{
                                    'icon-edit-active-color': MouseEnterId == row.billId
                                }"
                                @click="tableDbEdit(row.billId)"
                            ></i>
                        </div>
                </template>
             </el-table-column>
             <el-table-column label="结算编号" width="300" class-name="blue-column">
                <template slot-scope="{ row }" >
                    <span @click="tableDbShow(row)">{{row.billNo}}</span>
                </template>
            </el-table-column>
             <el-table-column
                prop="billDate"
                label="结算日期"
                width="250"
            >
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="机构"
                align="center"
                min-width="200"
            >
            </el-table-column>
            <el-table-column
                prop="settleUnit"
                label="结算单位"
                align="center"
                min-width="200"
            >
            </el-table-column>
            <el-table-column
                prop="taxRatePrice"
                label="税价合计（元）"
                align="center"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="noTaxPrice"
                label="不含税金额（元）"
                align="center"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="taxPrice"
                label="税额（元）"
                align="center"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="evaluateGrade"
                label="评价"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="100"
            >
                <template slot-scope="{ row }">
                    <span>{{ statusLable(row.state) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="红单状态"
                width="100"
            >
                <template slot-scope="{ row }">
                    <span>{{  row.redState ? redState.find(x=x.value === row.redState).label : '' }}</span>
                </template>
            </el-table-column>
        </el-table>
        <ComPagination
            :total="pagination.total"
            @update:currentPage="currentChange"
            :currentPage="pagination.page"
            @update:pageSize="updatePageSize"
        />
        <!-- mask -->
        <el-dialog
            title="高级搜索"
            :visible.sync="dialogVisibleSearch"
            width="650px"
            :modal="false"
            :modal-append-to-body="false"
            custom-class="searchDialog"
        >
            <div >
                <el-form  label-width="100px">
                    <el-form-item label="机构：">
                        <el-input
                            v-model="input1"
                            placeholder="请输入内容"
                            size="mini"
                        >
                        <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="计划日期：">
                        <div style="display:flex">
                            <el-date-picker v-model="value1" size="mini" style="flex:1"> </el-date-picker>
                            <span class="separate">—</span>
                            <el-date-picker arrow-control v-model="value2" size="mini"  style="flex:1">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="状态：">
                         <el-select v-model="value1" size="mini" placeholder="请选择活动区域" :clearable="false" :popper-append-to-body="false" style="width:100%;line-height:30px">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
             </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" style="background: #7aa818; color: #fff"
                    >重置</el-button
                >
                <el-button size="mini" style="background: #2e61d7; color: #fff"
                    >确定</el-button
                >
            </span>
        </el-dialog>
        <!-- <ComMaskAdd ref="ComMaskAdd" @refreshTable="tenderApplyListByEntity" /> -->
    </div>
</template>

<script>
import request from '@/api/equip/equipSettle.js'
import ComPagination from '@/components/pagination/pagination.vue'
import { mapState } from 'vuex'
export default {
    data () {
        return {
            tableData: [],
            loading: false,
            MouseEnterId: 0,
            dialogVisibleSearch: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },

            value: '',
            textarea: '',
            formData: {
                state: 0
            },
            input1: '',
            value1: '',
            value2: '',
            cellClsNm: '',
            pagination: {
                'limit': 10,
                'page': 1,
                'query': '',
                'orgId': this.$store.state.userInfo.orgInfo.orgId,
                'founderId': localStorage.getItem('userId')
            },

        }
    },
    components: {
        ComPagination
    },
    computed: {
        ...mapState({
            maintenanceType: state=>state.equip.equipData.maintenanceType, //维保类型
            redState: state=>state.equip.equipData.redState, //红单状态
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state//传财务单据状态
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    created () {

    },
    mounted () {
        this.getDicValue()
    },
    methods: {
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setMaintenanceType')//更新维保类型
        },
        getList () {
            this.loading = true
            request.purchaseSettleList(this.pagination).then(res=>{
                this.tableData = res.list
                this.pagination.total = res.totalCount
                this.loading = false
            })
        },
        search () {
            this.pagination.page = 1
            this.getList()
        },
        cellClick () {
            console.log(123)
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.billId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //新增
        openAddDialog () {
            this.$router.push('/purchaseSettleAdd')
        },
        //编辑
        tableDbEdit (billid) {
            this.$router.push({
                path: '/purchaseSettleEdit',
                query: { billid }
            })
        },
        //查看
        tableDbShow (row) {
            this.$router.push({
                path: '/purchaseSettleShow',
                query: { billid: row.billId }
            })
        },
        deleteBill () {

        },
        cancellationBill () {},
        attentionBill () {},
        changeBill () {},
        formatter () {},
        currentChange (page) {
            this.pagination.page = page
            this.getList()
        },
        updatePageSize (limit) {
            this.pagination.limit = limit
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep.el-table .cell {
    text-align: center;
}
::v-deep.el-steps--simple{
    background: #eff2f6;
    margin-bottom: 10px;
}
#iconEdit:hover{
    color: red;
}
.like{
    color: rgb(46,97,215);
    font-size: 17px;
    line-height: 30px;
    cursor: pointer;
}
.dialog-footer {
    text-align: right;
}
.step{
    background: #eff2f6;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.step ul{
    display: flex;
}
.step ul li span{
    font-size: 16px;
}
.step ul li span:nth-child(1){
    cursor: pointer;
}
.step ul li span:not(:nth-child(1)){
    font-weight: 600;
}
</style>
